/**
 * @file Button 样式
 * @author leon <ludafa@outlook.com>
 */

@require '../css/variable.styl'

$san-button-default = {
    color: $md-colors.grey800
    color-hover: $md-colors.grey800
    color-active: $md-colors.grey800
    background-color: $md-colors.transparent
    background-color-hover: rgba(#999, .2)
    background-color-active: rgba(#999, .4)
    color-ripple: $md-colors.darkBlack
}

$san-button-primary = {
    color: $md-colors.pinkA200
    color-hover: $md-colors.pinkA200
    color-active: $md-colors.pinkA200
    color-disabled: $md-colors.grey900
    background-color: $md-colors.transparent
    background-color-hover: $md-colors.pinkA200
    background-color-active: $md-colors.pinkA200
    backgorund-color-disabled: $md-colors.grey200
    color-ripple: $md-colors.pinkA200
}

$san-button-secondery = {
    color: $md-colors.cyan500
    color-hover: $md-colors.cyan500
    color-active: $md-colors.cyan500
    color-disabled: $md-colors.grey900
    background-color: $md-colors.transparent
    background-color-hover: $md-colors.cyan500
    background-color-active: $md-colors.cyan500
    backgorund-color-disabled: $md-colors.grey200
    color-ripple: $md-colors.cyan500
}

$san-button-danger = {
    color: $md-colors.red600
    color-hover: $md-colors.red600
    color-active: $md-colors.red600
    color-disabled: $md-colors.grey900
    background-color: $md-colors.transparent
    background-color-hover: $md-colors.red600
    background-color-active: $md-colors.red600
    backgorund-color-disabled: $md-colors.grey200
    color-ripple: $md-colors.red600
}

$san-button-success = {
    color: $md-colors.green500
    color-hover: $md-colors.green500
    color-active: $md-colors.green500
    color-disabled: $md-colors.grey900
    background-color: $md-colors.transparent
    background-color-hover: $md-colors.green500
    background-color-active: $md-colors.green500
    backgorund-color-disabled: $md-colors.grey200
    color-ripple: $md-colors.green500
}

$san-button-info = {
    color: $md-colors.blue500
    color-hover: $md-colors.blue500
    color-active: $md-colors.blue500
    color-disabled: $md-colors.grey900
    background-color: $md-colors.transparent
    background-color-hover: $md-colors.blue500
    background-color-active: $md-colors.blue500
    backgorund-color-disabled: $md-colors.grey200
    color-ripple: $md-colors.blue500
}

$san-button-warning = {
    color: $md-colors.orange500
    color-hover: $md-colors.orange500
    color-active: $md-colors.orange500
    color-disabled: $md-colors.grey900
    background-color: $md-colors.transparent
    background-color-hover: $md-colors.orange500
    background-color-active: $md-colors.orange500
    backgorund-color-disabled: $md-colors.grey200
    color-ripple: $md-colors.orange500
}

$san-button-color-themes = {
    primary: $san-button-primary,
    secondery: $san-button-secondery,
    danger: $san-button-danger,
    success: $san-button-success,
    info: $san-button-info,
    warning: $san-button-warning
}

san-button-swatch($swatches, $revert = false)

    color: $revert ? $md-colors.white : $swatches.color
    background-color: $revert ? $swatches.color : $swatches.background-color

    & .{$san-class-prefix}-ripple
        background-color: $swatches.color-ripple

    &:hover
        color: $revert ? $md-colors.white : $swatches.color-hover
        background-color: rgba($swatches.background-color-hover, $revert ? .6 : .2)

    &:active
        color: $revert ? $md-colors.white : $swatches.color-active
        background-color: rgba($swatches.background-color-active, $revert ? .8 : .4)

.sm-button
    position: relative
    box-sizing: border-box
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px
    padding: 0 16px
    line-height: @height
    background-color: #fff
    border: none
    outline: none
    font-family: Roboto
    font-size: 14px
    border-radius: 2px
    color: $md-colors.blue500
    text-transform: uppercase
    overflow: hidden
    text-decoration: none
    vertical-align: middle;
    cursor: pointer
    user-select: none

    transition: all .3s

    san-button-swatch($san-button-default)

    for $color-theme, $value in $san-button-color-themes
        &.variant-{$color-theme}
            san-button-swatch($value)
            &.variant-raised,
            &.variant-floating
                san-button-swatch($value, true)

    &>.sm-icon
        font-size: 0.75em

    &.variant-icon
        width: 36px;
        height: @width;
        padding: 0
        border-radius: 50%

    &.state-disabled
        color: rgba(0,0,0,.38);
        cursor: not-allowed;
        background-color: transparent;
        &:hover
            background-color: transparent;
            color: rgba(0,0,0,.38);


    &.variant-raised.state-disabled
        color: rgba(0,0,0,.3);
        background-color: rgba(0, 0, 0, .3);

        &:hover
            background-color: rgba(0, 0, 0, .3);
            color: rgba(0,0,0,.3);


@require '../Ripple/TouchRipple.styl'
@require '../Ripple/CenterRipple.styl'
@require '../Icon/Icon.styl'
